.con {
	width: 100%;
}

.item {
	height: 700px;
}

.img-box {
	display: flex;
	justify-content: space-around;
}

.img {
	width: 200px;
	height: 200px;
	margin-top: 50px;
}

.title {
	margin-top: 100px;
}

.isShow {
	opacity: 1;
}

/*淡入动画*/
@keyframes show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*从左到右变出动画*/
@keyframes typing {
	from {}

	to {
		width: 100%;
	}
}

/*向下淡出动画*/
@keyframes fadeInDown {
	0% {
		transform: translateY(60%);
		opacity: 0;
	}

	100% {
		transform: none;
		opacity: 1;
	}
}

@keyframes fadeInDownsProduct {
	0% {
		transform: translateY(180px);
		opacity: 0.4;
	}

	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes fadeInDowns {
	0% {
		transform: translateY(80px);
		opacity: 0.4;
	}

	100% {
		transform: none;
		opacity: 1;
	}
}

/* 隐藏 */
@keyframes hiddens {
	0% {
		transform: none;
		opacity: 1;
	}

	100% {
		transform: translateY(80px);
		opacity: 0;
	}
}

/*向上淡出动画*/
@keyframes fadeInUp {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}

	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

/*左淡出动画*/
@keyframes fadeInLeft {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

/*右淡出动画*/
@keyframes fadeInRight {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

/*导航栏淡入淡出动画*/
@keyframes nav-top {
	0% {
		height: 0;
		opacity: 0;
	}

	100% {
		height: 60px;
		opacity: 1;
	}
}

@keyframes nav-btm {
	0% {
		height: 60px;
		opacity: 1;
	}

	100% {
		height: 0;
		opacity: 0;
	}
}

@keyframes showBtn {
	0% {
		visibility: hidden;
		opacity: 0;
	}

	100% {
		visibility: visible;
		opacity: 1;
	}
}

@keyframes hiddenBtn {
	0% {
		opacity: 1;
		visibility: visible;
	}

	100% {
		opacity: 0;
		visibility: hidden;
	}
}
